import { Meta, Source } from '@storybook/blocks';
import { useIcon } from './';

<Meta title="HOOKS/useIcon" />

# useIcon()
###### `useIcon(icon: string, iconProps?: Omit<IconProps, 'icon'>)`
This hook will retrieve an icon by name from the [@iconify/react](https://iconify.design/docs/icon-components/react/) package.

To find an available icon name, simply search for an icon on [iconify](https://icon-sets.iconify.design/) and then provide the name to the hook.

### Example Usage

<Source dark code={`
import { useIcon } from '@hakit/core';
function IconExample() {
  const icon = useIcon('mdi:home');
  return <div>{icon}</div>
}
`} />

## Outputs

<div>{useIcon('mdi:home')}</div>

## Custom Props

If you want to provide props that the Icon component that [@iconify/react"](https://iconify.design/docs/icon-components/react/) supports, pass it as the second parameter.
This example will change the color to red and the size to 40px.
<Source dark code={`
import { useIcon } from '@hakit/core';
function IconExample() {
  const icon = useIcon('mdi:home', {
    color: 'red',
    style: {
      fontSize: 40
    }
  });
  return <div>{icon}</div>
}
`} />

## Outputs

<div>{useIcon('mdi:home', {
    color: 'red',
    style: {
      fontSize: 40
    }
})}</div>